<template>
   <div>
      <div class="query-part">
         <el-form class="query-container" size="small">
            <div class="query-row">
               <div class="query-col">
                  <el-form-item label="专业名称:">
                     <el-input
                        v-model="queryForm.majorName"
                        clearable
                     ></el-input>
                  </el-form-item>
               </div>
               <div class="btn-container">
                  <el-button
                     @click="getCollegeList()"
                     class="btn"
                     type="primary"
                     size="mini"
                     ><el-icon style="margin-right: 2px"><Search /></el-icon
                     >查询</el-button
                  >
               </div>
            </div>
         </el-form>
      </div>

      <div class="list-part">
         <div>
            <el-tabs
               v-model="activeName"
               class="demo-tabs"
               @tab-click="handleClick"
            >
               <el-tab-pane label="学术型硕士" name="first"></el-tab-pane>
               <el-tab-pane label="专业学位硕士" name="second"></el-tab-pane>
            </el-tabs>
         </div>

         <div style="display: flex">
            <ul class="my-ul">
               <li
                  @click="oneUlClick(item.id)"
                  v-for="(item, i) in levelOneMajor"
                  :key="i"
                  tabindex="1"
               >
                  <span>{{ item.majorName }}</span>
               </li>
            </ul>

            <ul class="my-ul">
               <li
                  @click="twoUlClick(item.id)"
                  v-for="(item, i) in levelTwoMajor"
                  :key="i"
                  tabindex="2"
               >
                  <span>{{ item.majorName }}</span>
               </li>
            </ul>

            <el-table
               :data="levelThreeMajor"
               :header-cell-style="{
                  height: '40px',
                  fontSize: '14px',
                  color: '#434444',
                  backgroundColor: '#ecf6fd',
               }"
               style="width: 100%"
            >
               <el-table-column
                  prop="majorName"
                  header-align="center"
                  align="center"
                  label="专业名称"
               />
               <el-table-column
                  prop="majorCode"
                  header-align="center"
                  align="center"
                  label="专业代码"
               />
               <el-table-column
                  prop=""
                  header-align="center"
                  align="center"
                  label="开设院校"
               >
                  <template v-slot="{ row }">
                     <el-button
                        type="warning"
                        @click="seeColleges(row.id)"
                        plain
                        >查看院校</el-button
                     >
                  </template>
               </el-table-column>
            </el-table>
         </div>
      </div>

      <div>
         <el-dialog
            style="margin-top: 218px"
            v-model="dialogShow"
            width="600px"
         >
            <template #header>
               <span style="font-size: 20px; font-weight: 600">专业院校</span>
            </template>

            <div>
               <el-table
                  :data="majorColleges"
                  :header-cell-style="{
                     height: '40px',
                     fontSize: '14px',
                     color: '#434444',
                     backgroundColor: '#ecf6fd',
                  }"
                  style="width: 100%"
               >
                  <el-table-column
                     prop="schoolName"
                     header-align="center"
                     align="center"
                     label="院校名称"
                  />
                  <el-table-column
                     prop="schoolType"
                     header-align="center"
                     align="center"
                     label="院校类型"
                  />
                  <el-table-column
                     prop="schoolArea"
                     header-align="center"
                     align="center"
                     label="院校地区"
                  />
                  <el-table-column
                     prop="schoolLevel"
                     header-align="center"
                     align="center"
                     label="区划类别"
                  />
               </el-table>
            </div>
         </el-dialog>
      </div>
   </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import $axios from "@/axios";

export default {
   name: "MajorInfo",
   setup() {
      let queryForm = reactive({
         majorName: "",
         majorType: "学术型",
      });

      let activeName = ref("first");

      let levelOneMajor = ref([]);

      let levelTwoMajor = ref([]);

      let levelThreeMajor = ref([]);

      let majorColleges = ref([]);
      let dialogShow = ref(false);

      function handleClick(tab) {
         if (tab.props.name === "first") {
            queryForm.majorType = "学术型";
         } else {
            queryForm.majorType = "专业型";
         }

         init();
      }

      function init() {
         $axios
            .post("/general2/getMajorList", {
               majorName: queryForm.majorName,
               majorType: queryForm.majorType,
               majorLevel: "1",
            })
            .then((res) => {
               levelOneMajor.value = res.data.data;
            });

         levelTwoMajor.value = [];
         levelThreeMajor.value = [];
      }

      function oneUlClick(parentId) {
         $axios
            .post("/general2/getMajorList", {
               majorName: queryForm.majorName,
               majorType: queryForm.majorType,
               majorLevel: "2",
               parentId: parentId,
            })
            .then((res) => {
               levelTwoMajor.value = res.data.data;
            });
      }

      function twoUlClick(parentId) {
         $axios
            .post("/general2/getMajorList", {
               majorName: queryForm.majorName,
               majorType: queryForm.majorType,
               majorLevel: "3",
               parentId: parentId,
            })
            .then((res) => {
               levelThreeMajor.value = res.data.data;
            });
      }

      function seeColleges(majorId) {
         $axios
            .post("/general2/getMajorColleges", {
               majorId: majorId,
            })
            .then((res) => {
               majorColleges.value = res.data.data;
               dialogShow.value = true;
            });
      }

      onMounted(() => {
         init();
      });

      return {
         queryForm,
         activeName,
         handleClick,
         levelOneMajor,
         levelTwoMajor,
         levelThreeMajor,
         oneUlClick,
         twoUlClick,
         seeColleges,
         majorColleges,
         dialogShow,
      };
   },
};
</script>

<style scoped>
.query-part {
   padding: 18px 18px 10px 18px;
   background-color: #fff;
   border-radius: 5px;
   margin: 15px 0;
   font-size: 14px;
}

.query-title {
   display: flex;
   margin-top: -6px;
   margin-left: -18px;
   padding-left: 6px;
   margin-bottom: 6px;
   width: 100%;
   height: 20px;
   border-left: 6px solid rgb(24, 144, 255);
}

.query-container {
   margin-top: 18px;
   padding: 0 5px;
}

.query-row {
   display: flex;
   justify-content: flex-start;
   height: 30px;
}

.query-row {
   position: relative;
   width: 100%;
   margin-bottom: 15px;
   display: flex;
   justify-content: flex-start;
}

.query-col {
   height: 100%;
   width: 16%;
   min-width: 16%;
   max-width: 16%;
   margin-right: 1%;
}

.btn-container {
   display: flex;
   justify-content: flex-end;
   height: 100%;
   margin-top: 1px;
}

.btn {
   width: 70px;
   height: 90%;
}

.list-part {
   padding: 10px 14px 10px 14px;
   background-color: #fff;
   border-radius: 5px;
}

::v-deep .el-form-item label {
   line-height: 30px;
}

.my-ul {
   border-right: 1px solid #e5e5e5;
   width: 33.3%;
   background-color: #ecf6fd;
}

.my-ul li {
   font-size: 15px;
   line-height: 40px;
   height: 40px;
   cursor: pointer;
}

li {
   line-height: 40px;
}
li:focus {
   border: 1px solid #ecf6fd;
   background-color: #fff;
}
</style>